<script type="text/javascript">
	$(document).ready(function() {
		//$(".ruleStuff").hide();
	});
</script>

<div class="box">
    <div class="content">
        <table width="100%" class="ticketTable">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Matches</th>
                    <td class="tc last" style="width: 16px">&nbsp;</td>
                </tr>
            </thead>
            <tbody>
                <tr class="rule" ref="1">
                	<td>Regex</td>
                	<td>From: bob@work.com</td>
                	<td><img src="/images/fff/delete.png" /></td>
                </tr>
                <tr class="ruleStuff">
                	<td colspan="3" style="padding: 0px 10px;">
                		<table width="100%">
                			<tr>
                				<td>Folder</td>
                				<td>Server Issues</td>
                				<td width="30px"><img src="/images/fff/delete.png" /></td>
                			</tr>
                			<tr>
                				<td>Email</td>
                				<td>me@home.com</td>
                				<td><img src="/images/fff/delete.png" /></td>
                			</tr>
                			<tr>
                				<td>&nbsp;</td>
                				<td>&nbsp;</td>
                				<td><img src="/images/fff/add.png" /></td>
                			</tr>
                		</table> 
                	</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
	$(".rule").click(function(){
		if($(".ruleStuff").is(":hidden"))
		{
			//$(".ruleStuff").slideDown('slow');
			$(".ruleStuff").fadeIn('slow');
		}
		else
		{
			//$(".ruleStuff").slideUp('slow');
			$(".ruleStuff").fadeOut('slow');
		}

		return false;
	});
</script>